<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@include file="/WEB-INF/templates/common/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>${title}</title>
<link rel="stylesheet"
	href="${basePath}/static/scan/js/My97DatePicker/skin/WdatePicker.css" />
<link rel="stylesheet" href="${basePath}/static/scan/css/scan.css" />
<script type="text/javascript" src="${basePath}/static/scan/jss/json2.js"></script>
<script src="${basePath}/static/scan/js/My97DatePicker/WdatePicker.js"></script>
<script src="${basePath}/static/js/jquery-1.7.2.min.js"></script>
<script src="${basePath}/static/js/jcrop/jquery.Jcrop.min.js"></script>
<script src="${basePath}/static/rotate/jquery.rotate.min.js"></script>
<script src="${basePath}/static/scan/scan.js"></script>
<script type="text/javascript" src="${basePath}/static/layer/layer.js"></script>
<link href="${basePath}/static/layer/layer_style.css" rel="stylesheet"
	type="text/css">
<script type="text/javascript"
	src="${basePath}/static/js/easydialog.min.js"></script>
<script LANGUAGE=Javascript FOR="ocx"
	EVENT="PostScanEveryPage(bSuccess)" defer>
/* 		var imgpath;
		imgpath = ocx.GetCurrentScanImagePath();
		var fileName = imgpath.substring(imgpath.lastIndexOf("\\")+1);
		Microsoft_Scan.scanImgArr.push(fileName); */
		try{
			//alert("上传进入");
			//上传本地图片至服务器
			Microsoft_Scan.uploadLocalImg(bSuccess);
			//Microtek_6240S.startScan(bSuccess);
		}catch(ex){
			layer.alert("浏览器设置错误！\r\n"+ex.message,{icon:0});
		}
</script>
<style>
	/*-------����ҳ��ʽ------*/
#div_TC {
	width: 940px;
	height: auto;
	background: #FFF;
	border-radius: 5px;
	margin: 0 auto;
	overflow: hidden;
	display: none;
}

.TC_title {
	width: 100%;
	height: 50px;
	background: #009388;
}

.TC_title h3 {
	font-family: "΢���ź�";
	font-size: 14px;
	color: #fff;
	font-weight: bold;
	line-height: 50px;
	text-indent: 32px;
	float: left;
}

.TC_title ul {
	width: 80px;
	height: 32px;
	float: right;
	margin-top: 9px;
}

.TC_title ul li {
	width: 76px;
	height: 32px;
	font-family: "΢���ź�";
	font-size: 14px;
	color: #030000;
	line-height: 32px;
	text-align: center;
	border: 0;
	background: url(${basePath}/static/scan/publics/images/but.png)
		no-repeat;
	float: left;
	margin-right: 14px;
}

.TC_title ul li input {
	cursor: pointer;
	display: block;
	width: 100%;
	height: 100%;
	font-size: 14px;
}

.TC_search_table {
	width: 936px;
	height:502px
	border: #e3e5e4 1px solid;
}

.TC_search_table li {
	float: left;
}

.TC_li {
	background: url(../../publics/images/sidebar2-2.png) no-repeat;
	margin-bottom: 4px;
	float: left;
}

.TC_current {
	color: #6c6f6f;
	background: url(../../publics/images/sidebar2-1.png) no-repeat;
}

.TC_foot {
	width: 100%;
	height: 54px;
	background: #009388;
	float: left;
}

.TC_foot ul {
	width: 100%;
	height: 32px;
	float: right;
	margin-top: 11px;
}

.TC_foot ul li {
	margin: 0 auto;
/* 	width: 172px; */
	height: 32px;
	font-family: "微软雅黑";
	font-size: 14px;
	color: #ffffff;
	line-height: 32px;
/* 	text-align: center; */
	border: 0;
}

.TC_foot ul li a {
	color: #ffffff;
	cursor: pointer;
	display: block;
	width: 76px;
	float: left;
	background: url(${basePath}/static/scan/publics/images/bc.png) no-repeat;
	margin: 0 5px;
}

#div_TC tr:nth-of-type(2n) .tdLabel_8 {
	background-color: #F5F5F5;
}

#div_TC tr td {
	border: 1px solid #D5DDDD;
}

.clear{clear:both}
</style>
</head>
<body>


	<div class="container">
		<input type="hidden" id="mrId" value="${hospitalNote.mrId}" />
		<input type="hidden" id="firstGuid" value="${hospitalNote.firstGuid}" />
		<input type="hidden" id="basePath" value="${basePath}" />
		<input type="hidden" id="scanFileSize" value="${scanFileSize}" />
		<input type="hidden" id="picHostPath" value="${picHostPath}" />
		<div class="header" id="Toolbar">
			<table style="width: 98%; margin: auto; border-collapse: collapse;"
				cellspacing="0" cellpadding="0" border="0" bordercolor="#FFFFFF">
				<tbody>
					<tr>
						<td>
							<table style="margin: auto; border-collapse: collapse;"
								width="100%" border="2" bordercolor="#FFFFFF" cellpadding="0"
								cellspacing="0">
								<tbody>
									<tr bordercolor="#FFFFFF">
										<td class="tdleft" align="center" valign="middle">
										<!-- 	<input
											id="ItemCurrentMrsSelect" size="10" class="Wdate"
											onfocus="WdatePicker()"> &nbsp;&nbsp; 病案数: <span
											id="baCount">0</span> 扫描页: <span id="scanCount">0</span> 编制页:
											<span id="catalogCount">0</span> --></td>
										<td align="center" valign="middle"><select
											id="ScanerSelect">
												
												<option value="Microtek_6240s">扫描仪-中晶6240s</option>
												<option value="Microtek_XT3500">平板-中晶XT3500</option>
												<option value="Microtek_S8090">扫描仪-中晶S8090</option>
										
										</select> &nbsp;&nbsp; <input type="button" value="设置"
											; onclick="Microsoft_Scan.settingScaner();" title="尺寸"> <input
											type="button" value="快捷键" title="显示扫描仪快捷键"
											onclick="layer.alert('单面扫描快捷键：ALT！\r\n连续扫描快捷键：空格键！', {icon: 6});">
											<input type="button" value="关闭" onclick="Microsoft_Scan.closeScaner();">
											<input type="button" value="中止" onclick="Microsoft_Scan.cancleScan();">
										</td>
										<td align="center" valign="middle"><input type="button"
											value="扫描" onclick="scan(1)"
											title="单面扫描快捷键：ALT！" style="font-weight: bold;"> <input
											type="button" value="连续扫描"
											onclick="scan(2)" title="连续扫描快捷键：空格键！"
											style="font-weight: bold;"></td>
										<td align="center" valign="middle"><!-- <input type="button"
											value="插扫" title="单张单面插扫"> <input type="button"
											value="替扫" title="单张单面替扫"> <input type="button"
											value="连续插扫"> --></td>
										<td align="center" valign="middle">
											<div style="padding: 3px 0;">
												<!--<input type="button" value="后退" onclick="history.go(-1);" style="cursor: hand;">
                                        &nbsp;
                                        <input type="button" value="前进" onclick="history.go(1);" style="cursor: hand;">
                                        &nbsp;-->
												<input type="button" value="刷新" onclick="location.reload();"
													style="cursor: hand;"> &nbsp; <input type="button"
													value="关闭" onclick="window.close();" style="cursor: hand;">
											</div>
										</td>
									</tr>
								</tbody>
							</table>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="content">
			<div class="left_content">
				<div class="left_content_content">
					<div class="ItemCurrentMr"></div>
				</div>
			</div>
			<div class="mid_content">
				<div class="mid_Allcontent">
					<div class="mid_content_header">
						<div id="MrDocViewOrToolbar">
							<div id="MrDocViewOrToolbarA">
								<table style="width: 98%;" cellspacing="0" cellpadding="0">
									<tbody>
										<tr>
											<td id="MrDocViewOrToolbarMrInfoTd" nowrap="nowrap"><span
												id="MrDocViewOrToolbarMrInfoSpan"> <!--   病案号: <span id="CurrentMrIdBox">2-10233818</span>&nbsp;&nbsp;-->
													识别码: <span id="CurrentMrcodeBox">${hospitalNote.mrId}</span>&nbsp;&nbsp;
													姓名: <span id="CurrentMrNameBox">${hospitalNote.name}</span>&nbsp;&nbsp;
													身份证号: <span id="CurrentMrOutTimeBox">${hospitalNote.idNumber}</span>
											</span> &nbsp;&nbsp; <span id="DocSearcher"></span></td>

											<td style="text-align: right;" nowrap="nowrap"><span
												id="CurrentTotalPagecount"
												style="color: #616130; font-size: larger;"></span>&nbsp;&nbsp;&nbsp;&nbsp;
												<button id="DeleteDocBtn"
													style="color: black; height: 25px;"
													onclick="deleteWendang();"></button>
											</td> 
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<div id="MrDocViewOrToolbarB">
							<table style="width: 98%;" cellspacing="0" cellpadding="0">
								<tbody>
									<tr>
										<td style="text-align: left;" nowrap="nowrap">
											<div id="operBtn">
											<!-- 	<input type="button" onclick="uploadFileByHttpClient()"
													value="上传数据"> &nbsp; <input type="button"
													value="扫描完成" onclick="updateScanStatus()"> -->
												<!--  <input type="button" value="贴条码"> -->
											<!-- 	&nbsp; <input type="button" value="去污点">  -->&nbsp; <input
													type="button" id="Edit" value="裁切"> &nbsp;
												<input type="button" onclick="OPERATOR_IMG.rotateImg(-1)" value="左纠偏">
												&nbsp; <input type="button" onclick="OPERATOR_IMG.rotateImg(1)" value="右纠偏">
												&nbsp; <input type="button" onclick="OPERATOR_IMG.rotateImg(180)"
													value="翻转"> &nbsp;
												<!--   <input type="button" value="还原"> -->
											</div>
										</td>

										<td style="text-align: right;">
											<div>
												&nbsp;&nbsp;&nbsp;&nbsp; <span class="toolBtn"
													onclick="filled()">充满</span> &nbsp; <span class="toolBtn"
													onclick="fullPage()">恢复</span> &nbsp; <span class="toolBtn"
													onclick="Thumbnail()">缩略图</span> &nbsp; <span
													class="effectBtn" title="放大" onclick="enlarge()">+</span>
												&nbsp; <span class="effectBtn" title="缩小" onclick="small()">-</span>
												&nbsp; <span class="toolBtn"
													onclick="location.reload(true);">刷新</span>
											</div>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="mid_content_content">
						<div
							style="height: 100%; cursor: default; overflow-y: scroll; padding: 10px;">
							<div class="imgContent" id="MrDocViewOrBoard">
								<ul id="MrDocViewOrBoardUl">
									<c:forEach items="${scanFileList}" var="scanFile"  varStatus="index">
									<li id="li${index.count}" fileUrl="${scanFile.fileUrl}" fileName="${scanFile.fileName}" fileHash="${scanFile.hash}" >
											<a id="xxxx" class="imgActive" onclick="test()" href="#">
											<span class="close"
											onclick="del(this)">x</span><img
											src="${picHostPath}${scanFile.fileUrl}${scanFile.fileName}" alt="" />
											
											</a>
										</li>
									
									</c:forEach>
								</ul>
							</div>
						</div>
					</div>
				</div>

			</div>
			<div class="right_content">
				<div class="menuList">
					<!--  <div class="itemOnePageType menuActive">
                    <span>00 - 病案首页</span>&nbsp;&nbsp;<span>11</span>
                </div>
                 -->
				</div>
			</div>
		</div>
	</div>
	<OBJECT ID="ocx" style="height:0;" CLASSID="CLSID:49903B72-9F44-41E1-A79B-B85A8BCEB89A">
	</OBJECT>
	
	<!-- 新增弹出框-->
	<div id="div_TC">
		<div class="TC_title">
			<h3>裁剪</h3>
			<ul>
				<li><a id="closeBtn2">取消</a></li>
			</ul>
		</div>
		<div class="TC_search_table">
			<div  style="width: 402px;margin:0 auto;height:502px;border:1px solid green">
				<img id="target" width="400" height="500" src=""/>
			</div>
			
			
	   </div>
		 
		<div class="TC_foot">
			<ul>
				<li id="coords">
				    <label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
				    <label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
				    <label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
				    <label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
				    <label>W <input type="text" size="4" id="w" name="w" /></label>
				    <label>H <input type="text" size="4" id="h" name="h" /></label>
				    <input type="button" value="裁剪" onClick="OPERATOR_IMG.shearingImg()">&nbsp;
				</li>
			</ul>
		</div>
	</div>

	<script>
	var h=window.innerHeight;
	$(".content").height(h);
	$('#Edit').on("click", function() {
		if(!OPERATOR_IMG.imgPath){
			layer.alert("请选择一张图片进行操作!",{icon:1});
			return;
		}
		//获取图片链接
		var imagePath=$("#picHostPath").val()+OPERATOR_IMG.imgPath;
		//为图片赋值
		$("#target").attr("src",imagePath);
			//调用剪切
			var jcrop_api;

		    $('#target').Jcrop({
		      onChange:   showCoords,
		      onSelect:   showCoords,
		      onRelease:  clearCoords
		    },function(){
		      jcrop_api = this;
		    });

		    $('#coords').on('change','input',function(e){
		      var x1 = $('#x1').val(),
		          x2 = $('#x2').val(),
		          y1 = $('#y1').val(),
		          y2 = $('#y2').val();
		      jcrop_api.setSelect([x1,y1,x2,y2]);
		    });
		easyDialog.open({
			container : 'div_TC',
			fixed : true
		});
		
		$('#closeBtn2').on("click", function() {
			
			
			easyDialog.close();
			
		})
	})
	var OPERATOR_IMG ={
			//文件名
			imgPath:"",
			//图片所在li的id
			liId:"",
			//旋转图片
			rotateImg:function(angle){
				if(!this.imgPath){
					layer.alert('请选择一张图片进行操作!', {icon: 5});
					//layser.alert("请选择一张图片进行操作!",{icon:0});
				}
				

				$.ajax({
					type:"post",
					data:{imgPath:this.imgPath,angle:angle},
					sync:false,
					url:"${basePath}/scan/rotateImg",
					success:function(data){
						if(data.success){
							var $img= $("#"+OPERATOR_IMG.liId+"").find("img");
							$img.rotate({ angle:0,animateTo:angle,easing: $.easing.easeInOutExpo })		
						}
					}
				})
				
			},
			//图片裁剪
			shearingImg:function(){
				var containerWidth=$("#target").attr("width");
				var containerHeight=$("#target").attr("height");
				var xStart= $('#x1').val();
				var yStart= $('#y1').val();   
				var imgWidth = $('#w').val();
				var imgHeight = $('#h').val();
				$.ajax({
					type:"post",
					data:{containerWidth:containerWidth,containerHeight:containerHeight,xStart:xStart,yStart:yStart,imgWidth:imgWidth,imgHeight:imgHeight,imgPath:this.imgPath},
					url:"${basePath}/scan/cutImg",
					success:function(data){
						if(data.success){
							var firstGuid=$("#firstGuid").val();
							window.location.href="${basePath}/scan/searchScan?firstGuid="+firstGuid;
						}
					}
				})
				
			}
	}
	

		
		
		

		//删除单个扫描图片
		function del(obj){
			layer.confirm('您确定要删除此条记录吗？', {
				  btn: ['确定','取消'] //按钮
				}, function(){
				  var lis=$(obj).closest("li");
				  var firstGuid=$("#firstGuid").val();
				 // var scanFunctionId=lis.attr("scanFunctionId");
				  var fileHash=lis.attr("fileHash");
				 // var sacnFileRelationId=lis.attr("sacnFileRelationId");
				 // var scanFileId=lis.attr("scanFileId");
				 
				  $.ajax({
				  	type:"post",
				  	data:{firstGuid:firstGuid,fileHash:fileHash},
				  	url:"${basePath}/scan/deleteScanImg",
				  	success:function(data){
				  		if(data.success){
				  			lis.remove();	
							layer.msg('删除成功！', {icon: 1});
				  		}else{
				  			layer.msg('删除失败！', {icon: 7});
				  		}
				  	}
				  });
				  
				  
				}, function(){
				  layer.close();
				});
			
		}
		
			  function showCoords(c)
			  {
			    $('#x1').val(c.x);
			    $('#y1').val(c.y);
			    $('#x2').val(c.x2);
			    $('#y2').val(c.y2);
			    $('#w').val(c.w);
			    $('#h').val(c.h);
			  };

			  function clearCoords()
			  {
			    $('#coords input').val('');
		};

		/*充满显示*/
		function filled() {
			$("#MrDocViewOrBoard ul").css({
				"width" : "100%",
				"height" : "200%"
			}).children("li").css({
				"width" : "100%"
			});
		}
		/*全页显示*/
		function fullPage() {
			$("#MrDocViewOrBoard ul").css({
				"width" : "60%",
				"height" : "120%"
			}).children("li").css({
				"width" : "100%"
			});
		}
		/*缩略图*/
		function Thumbnail() {
			$("#MrDocViewOrBoard ul").css({
				"width" : "100%",
				"height" : "80%"
			}).children("li").css({
				"width" : "33%"
			});
		}
		
		/*缩小功能*/
		function small() {
			var ulWidth = $("#MrDocViewOrBoard ul").css("width");
			var ulHeight = $("#MrDocViewOrBoard ul").css("height");
			var el = parseInt(ulHeight) / parseInt(ulWidth);
			$("#MrDocViewOrBoard ul").css("width",
					parseInt(ulWidth) / 1.1 + "px")
			$("#MrDocViewOrBoard ul").css(
					"height",
					parseInt($("#MrDocViewOrBoard ul").css("width")) * el
							+ "px");
		}
		
		/*放大功能*/
		function enlarge() {
			var imgContentWidth = $("#MrDocViewOrBoard").css("width");
			var ulWidth = $("#MrDocViewOrBoard ul").css("width");
			var ulHeight = $("#MrDocViewOrBoard ul").css("height");
			var el = parseInt(ulHeight) / parseInt(ulWidth);
			if (parseInt(ulWidth) >= parseInt(imgContentWidth)) {
				return false;
			}
			$("#MrDocViewOrBoard ul").css("width",
					parseInt(ulWidth) * 1.1 + "px");
			$("#MrDocViewOrBoard ul").css(
					"height",
					parseInt($("#MrDocViewOrBoard ul").css("width")) * el
							+ "px");

		}
		
		
		function test(obj){
			$(obj).css({"border":"2px solid green"});
			 var fileName=$(obj).attr("fileName");
			  var fileUrl=$(obj).attr("fileUrl");
			  var liId=$(obj).attr("id");
			  OPERATOR_IMG.imgPath=fileUrl+fileName;
			    OPERATOR_IMG.liId=liId;	 
		}
		
		$("#MrDocViewOrBoardUl li").on("click",function(){
			$(this).find("a").css({"border":"2px solid green"});
			$(this).siblings().find("a").css({"border":"2px solid red"});
			var $img=$(this).find("img");
		    var liId=$(this).attr("id");
	
		    var fileName=$(this).attr("fileName");
		    var fileUrl=$(this).attr("fileUrl");
		    //alert(fileUrl+fileName);
		    OPERATOR_IMG.imgPath=fileUrl+fileName;
		    OPERATOR_IMG.liId=liId;	    
		});
		
	</script>
</body>
</html>